<script setup lang="ts">
import type { IOptionItem } from './me'

import LanguageSelector from '@/components/common/LanguageSelector.vue'
import OptionList from './components/OptionList.vue'
import UserInfoCard from './components/UserInfoCard.vue'
import { useUserInfo } from './composable/useUserInfo'

definePage({
  style: {
    navigationBarTitleText: '我的',
    navigationStyle: 'custom',
  },
})

// 使用用户信息composable
const { userInfo, loading, fetchUserInfo } = useUserInfo()

// 跳转到用户详细信息页面
function navigateToUserDetail() {
  uni.navigateTo({
    url: '/pages/me/views/currentUserInfo',
  })
}

// 选项点击处理函数
function handleHelpClick() {
  uni.showToast({
    title: '跳转到帮助中心',
    icon: 'none',
  })
}

function handlePasswordClick() {
  uni.showToast({
    title: '跳转到修改密码',
    icon: 'none',
  })
}

function handleSettingsClick() {
  uni.showToast({
    title: '跳转到设置',
    icon: 'none',
  })
}

function handleLogoutClick() {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
        })
      }
    },
  })
}

// 选项列表配置
const optionList: IOptionItem[] = [
  {
    id: 'help',
    title: '帮助中心',
    icon: 'i-carbon-help',
    description: '常见问题与使用指南',
    onClick: handleHelpClick,
  },
  {
    id: 'password',
    title: '修改密码',
    icon: 'i-carbon-password',
    description: '更改登录密码',
    onClick: handlePasswordClick,
  },
  {
    id: 'settings',
    title: '设置',
    icon: 'i-carbon-settings',
    description: '应用设置与偏好',
    onClick: handleSettingsClick,
  },
  {
    id: 'logout',
    title: '退出登录',
    icon: 'i-carbon-logout',
    description: '安全退出当前账户',
    onClick: handleLogoutClick,
  },
]

// 页面加载时获取用户信息
onLoad(() => {
  fetchUserInfo()
})
</script>

<template>
  <view class="min-h-screen bg-gray-100">
    <sar-navbar title="我的" status-bar fixed>
      <template #left>
        <LanguageSelector />
      </template>
    </sar-navbar>
    <!-- 内容区域 -->
    <view class="mt-4 pb-4">
      <!-- 用户信息卡片 -->
      <UserInfoCard
        :user-info="userInfo"
        :loading="loading"
        @click="navigateToUserDetail"
      />

      <!-- 功能选项列表 -->
      <OptionList :options="optionList" />
    </view>
  </view>
</template>

<style scoped>
</style>
